@import 'wildcard/src/global-styles/breakpoints';

.search-sidebar {
    padding: 0 1rem;
    width: 17.5rem;
    flex-shrink: 0;

    @media (--md-breakpoint-down) {
        width: 100%;
    }

    &__item {
        @media (--md-breakpoint-down) {
            width: calc(50% - 0.75rem);
        }

        @media (--xs-breakpoint-down) {
            width: 100%;
        }
    }

    &__sticky-box {
        @media (--md-breakpoint-down) {
            // Sidebar shouldn't be sticky in smaller screens
            position: static !important;

            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            column-gap: 1.5rem;
        }

        @media (--xs-breakpoint-down) {
            display: block;
        }
    }
}
